﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Gallery.master" AutoEventWireup="true"
	CodeFile="UploadPage.aspx.cs" Inherits="UploadPage" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
	<telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" ControlsToSkip="H4H5H6" Skin="Metro" />
	<%--START UPLOAD PAGE WRAPPER--%>
	<div class="galMainContent">
		<%--START LEFT CONTENT WRAPPER--%>
		<div class="galLeftContent">
			<%--START UPLOAD WRAPPER--%>
			<div class="galUploadWrapper">
				<asp:Label Text="" ID="labelSuccessMessage" runat="server" CssClass="gallSuccessUpload" />
				<div class="galUploadControl">
					<asp:Button ID="buttonUploadImagesTop" Text="Upload Pictures" OnClick="ButtonUploadImages_Click"
						runat="server" />
					<telerik:RadAsyncUpload ID="asyncUploadImages" runat="server" Width="500" HttpHandlerUrl="~/CustomHandlers/CustomHandler.ashx"
						OnClientFileUploaded="fileUploaded" MultipleFileSelection="Automatic" UploadedFilesRendering="BelowFileInput"
						OnClientFileUploadRemoved="uploadRemoved" AllowedFileExtensions="jpeg,jpg,gif,png,bmp" MaxFileSize="4194304" Skin="Metro">
					</telerik:RadAsyncUpload>
				</div>
				<div class="galUploadButton">
					<asp:Button ID="buttonUploadImagesBottom" Text="Upload Pictures" OnClick="ButtonUploadImages_Click"
						runat="server" />
				</div>
			</div>
			<%--END UPLOAD WRAPPER--%>
		</div>
		<%--END LEFT CONTENT WRAPPER--%>
		<!-- /galLeftContent -->
		<%--START RIGHT (DESCRIPTION) WRAPPER--%>
		<div class="galRightContent">
			<h2>
				How to Upload?
			</h2>
			<h3>
				Using AsyncUpload</h3>
			<p>
				Click on the Select button in order to show the file dialog and select an image
				file for upload. The file must not be bigger than 4MB. Once the file is uploaded,
				several input fields would appear, allowing you to add additional information to
				the picture.</p>
			
			<p>The Title and Location fields have their length restricted to 150 characters,
				and the Description field has its length restricted to 600. Once you are finished
				with typing the information, click on the Upload Pictures button to save the images
				to the database.
			</p>
		</div>
			<script type="text/javascript">
			//<![CDATA[
                var $ = $telerik.$;

				function pageLoad() {
                    resolveButtonsVisibility();
				}

                function uploadRemoved(sender, args) {
                    resolveButtonsVisibility();
                }
                
				function fileUploaded(sender, args) {
					truncateName(args);

					var $row = $(args.get_row());

					var id = args.get_fileInfo().TempFileLocation;

                    //Construct the div containing the image thumbnail
					var imageRow = "<div class='galImageRow'><img class='image' alt='" + args.get_fileName() + "' src='" + getImageUrl(id) + "' width='200px' /></div>";
                                            	
					var titleField = createField(sender, "Title", false);
					var locationField = createField(sender, "Location", false);
					var descriptionField = createField(sender, "Description", true);

                    //Construct the div containing the additional input fields
					var infoRow = $("<div class='galInfoRow'></div>")
						.append(titleField)
						.append(locationField)
						.append(descriptionField);

                    var detailsRow = $("<div class='galImgDetails'></div>")
						.append(imageRow)
						.append(infoRow);

                    //Append the additional info divs to the uploaded file row
					$row.append(detailsRow);

					resolveButtonsVisibility();
				}
                
                //Shortens the display name of the file if it is too long
				function truncateName(args) {
					var $span = $(".ruUploadProgress", args.get_row());
					var text = $span.text();
					if (text.length > 23) {
						var newString = text.substring(0, 23) + '...';
						$span.text(newString);
					}
				}

				function getImageUrl(id) {
					var url = window.location.href;
					var handler = "CustomHandlers/StreamImage.ashx?TempFileLocation=" + id;
					var index = url.lastIndexOf("/");
					var completeUrl = url.substring(0, index + 1) + handler;
					return completeUrl
				}

                //Constructs a single or multiline input field
				function createField(upload, fieldName, multiline) {
					var inputName = upload.getAdditionalFieldID(fieldName);
					var inputID = inputName;
					var input;
					if (multiline) {
						input = createMultilineInput(inputID, inputName);
					}
					else {
						var inputType = "text";
						input = createInput(inputType, inputID, inputName);
					}

					var label = createLabel(inputID, fieldName);

					return "<div class='galInfoRowWrapper'>" + label + input + "</div>";
				}

				function createInput(inputType, inputID, inputName) {
					var input = "<input type='" + inputType + "' id='" + inputID + "' name='" + inputName + "' maxlength='150' />";
					return input;
				}

				function createMultilineInput(inputID, inputName) {
					var input = "<textarea id='" + inputID + "' name='" + inputName + "' maxlength='600' />";
					return input;
				}

				function createLabel(forArrt, labelTitle) {
					var label = "<label for=" + forArrt + ">" + labelTitle + ": </label>";
					return label;
				}

                //This function redirects to the main page, and it is called after the files have been uploaded
				function successRedirect() {
					Sys.Application.remove_load(successRedirect);
                    
                    var interval = setInterval(function() {
                        var secondsLeft = $get('redirectCounter');
                        $(secondsLeft).text($(secondsLeft).text()-1);
                    },1000);
                    
					setTimeout(function () {
                        clearInterval(interval);
						window.location.href = "Default.aspx";
					}, 10000);

				}

                //Shows or hides the top and bottom upload buttons, depending on the number of uploaded files
				function resolveButtonsVisibility() {
					var upload = $find("<%= asyncUploadImages.ClientID %>");
					var topButton = $("#<%= buttonUploadImagesTop.ClientID %>");
					var bottomButton = $("#<%= buttonUploadImagesBottom.ClientID %>");

					if (upload._uploadedFiles.length == 0) {
						topButton.parent().hide();
						bottomButton.parent().hide();
					}
					else if (upload._uploadedFiles.length > 3) {
						topButton.parent().show();
						bottomButton.parent().show();
					}
					else {
						topButton.parent().hide();
						bottomButton.parent().show();
					}
				}
				//]]>
			</script>
		<%--END RIGHT (DESCRIPTION) WRAPPER--%>
		<!-- /galRightContent -->
	</div>
	<%--END UPLOAD PAGE WRAPPER--%>
	<!-- /galMainContent -->
	<div class="galPush">
	</div>
	<%--USED FOR POSITIONING THE FOOTER--%>
	<!-- /galPush -->
	</div>
	<%--CLOSE MAIN PAGE WRAPPER--%>
	<!-- /galWrapper -->
</asp:Content>
